<template>
  <section>
    <div style="text-align:center; backgroundColor: #fff;">
      <!-- tabs工具条 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商户密钥列表" name="first">
          <el-row>
            <!-- <el-form
              :model="numberValidateForm"
              ref="numberValidateForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-col :span="10" style="padding: 0; height: 60px;">
                <el-form-item label="状态:" prop="region">
                  <el-select v-model="numberValidateForm.region" placeholder="全部" clearable>
                    <el-option label="全部" value="shanghai"></el-option>
                    <el-option label="禁用" value="shanghai"></el-option>
                    <el-option label="启用" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="padding: 0; height: 60px;">
                <el-form-item>
                  <el-button @click="search" type="primary" style="width: 80px">
                    <i class="el-icon-search"></i>查询
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form> -->
          </el-row>
          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" align="center"></el-table-column>
              <el-table-column prop="merchantId" label="ID" align="center" width="150"></el-table-column>
              <el-table-column prop="publicKey" label="API的KEY" align="center" width="520"></el-table-column>
              <el-table-column prop="secretKey" align="center" label="私钥的KEY" width="520"></el-table-column>
              <el-table-column prop="buyNotify" label="回调入金的URL" align="center" width="520"></el-table-column>
              <el-table-column prop="sailNotify" label="回调出金的URL" align="center" width="520"></el-table-column>
              <el-table-column prop="status" label="状态" align="center" width="120">
                  <template slot-scope="scope">
                      {{getWhiteStatus(scope.row.status)}}
                  </template> 
              </el-table-column>
               <el-table-column label="操作" align="center" width="180" fixed="right">
                <template slot-scope="scope">
                  <el-button @click="reset(scope.row)" type="primary" size="small">修改</el-button>
                </template>
              </el-table-column> 
              </el-table> 
            <div class="block">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageIndexChange"
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal"
            ></el-pagination>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-dialog title="修改" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商户ID:" label-width="120px" style="display:none;">
            <el-input v-model="form.name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="回调入金URL:" label-width="120px">
            <el-input v-model="form.in" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="回调出金URL:" label-width="120px">
            <el-input v-model="form.out" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click.native.prevent="resetSecretSubmit" :loading="resetLoad">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="gridLoading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
    </transition>
  </section>
</template>
<script>
import enums from '../../common/Enum'
import DataUtil from "../../common/dataUtil";
import { resetSecretList ,getSecretById} from "@/api/index.js";

export default {
  data() {
    return {
      gridLoading: false,
      activeName: "first",
      resetLoad : false,
      dialogFormVisible : false,
      pageIndex: this.$store.getters.getOrderListAllIndex,
      pageSize: 10,
      dataTotal: 0,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: ""
      },
      numberValidateForm: {
        region: ""
      },
      tableData: [],
      form: {
          name: '',
          in: '',
          out: '',
      },
    };
  },
  methods: {
    pageIndexChange(val) {
				this.pageIndex = val;
				this.$store.dispatch('setOrderListAllIndex', val)
				this.search();
    },
    pageSizeChange(val) {
    },
    getWhiteStatus(type){
      return enums.getwhiteStatus(type);
    },
    //////查询
    search() {
      this.pageIndex = 1;
      this.bindGrid();
    },
    /////获取密钥列表
    bindGrid() {
      let tableData = [];
      const formData = new FormData();
      this.gridLoading = true;
      formData.append('merchantId',JSON.parse(DataUtil.userInfo()).id);
      getSecretById(formData).then(response => {
        if ('01001' == response.status) {
          this.gridLoading = false;
          if(response.data){
            this.dataTotal = 0;
            // formData.delete("merchantId");
            tableData.push(response.data);
            this.tableData = tableData;
          }else {
            this.tableData = [];
            this.dataTotal = 0;
          }
        } else {
          // formData.delete("merchantId");
          this.$message.error(response.msg);
        }
      }, response => {
        this.gridLoading = false;
      });
    },
    /////////点击修改
    reset(row){
      this.dialogFormVisible = true;
      this.form.name =  row.id;
      this.form.in =  row.buyNotify;
      this.form.out =  row.sailNotify;
    },
    /////////提交修改
    resetSecretSubmit(){
      this.resetLoad = true;
      if(this.form.name){
        const formData = new FormData();
          formData.append('id',this.form.name);
          formData.append('buyNotify',this.form.in);
          formData.append('sailNotify',this.form.out);
          resetSecretList(formData).then(response => {
            if ('01001' == response.status) {
              this.gridLoading = false;
                this.resetLoad = false;
                this.dialogFormVisible = false;
                // formData.delete("id");
                formData.delete("buyNotify");
                formData.delete("sailNotify");
                this.$message({
                    message: '修改成功！',
                    type: 'success'
                });
                this.bindGrid();
            } else {
                // formData.delete("id");
                // formData.delete("buyNotify");
                // formData.delete("sailNotify");
              this.$message.error(response.msg);
              this.resetLoad = false;
            }
          }, response => {
            
          });
      }else{
          this.resetLoad = false;
          this.$message.error("商户ID不正确！");
      }
    },
  },
  mounted: function() {
    this.bindGrid();
  },
};
</script>
<style>
.blur {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10%;
  margin-top: 0;
}
.el-pagination {
  display: inline-block;
  width: 80%;
}
.block {
  padding: 10px 0;
}
.spin-container {
    background: rgba(0,0,0,.1)!important;
}
.basic-table{
      width: 1160px;
      border:1px solid #e8eaee;
}
.basic-table .thead{
    height:38px;
    line-height:38px;
    color: #000;
    font-weight: bold;
   background: #eef1f6;
   overflow-x: scroll;
   display: flex;
   
}
.basic-table span{
  display: inline-block;
  float: left;
   padding:0 15px;
}
.basic-table .tbody{
   overflow-x: scroll;
}
.basic-table .tbody span{
       height:38px;
    line-height:38px;
}
</style>
